<template>
  <div class="dashboard-container">
    <div>
      欢迎回来 {{ name }}，上次登录时间是：{{ lastTime }}
    </div>
    <el-row style="margin: 20px 0 5px 0;">
      <el-col :span="24">
        <div class="dashboard-text">所属班级信息</div>
        <el-descriptions border>
          <el-descriptions-item label="班级编码">{{ classInfo.classCode }}</el-descriptions-item>
          <el-descriptions-item label="班级名称">{{ classInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="班级性质">
            <el-tag size="small">{{ classInfo.type }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="班级描述">{{ classInfo.desc }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <!-- 课表 -->
    <div class="dashboard-text">课程表</div>
    <el-table v-loading="loading.timetableLoading" :data="timetableArr" element-loading-text="加载中" border style="width: 100%">
      <el-table-column label="周一" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.monday &&scope.row.monday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.monday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.monday.startTime }} - {{ scope.row.monday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周二" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.tuesday && scope.row.tuesday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.tuesday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.tuesday.startTime }} - {{ scope.row.tuesday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周三" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.wednesday && scope.row.wednesday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.wednesday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.wednesday.startTime }} - {{ scope.row.wednesday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周四" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.thursday && scope.row.thursday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.thursday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.thursday.startTime }} - {{ scope.row.thursday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周五" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.friday && scope.row.friday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.friday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.friday.startTime }} - {{ scope.row.friday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周六" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.saturday && scope.row.saturday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.saturday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.saturday.startTime }} - {{ scope.row.saturday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="周日" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.sunday && scope.row.sunday.coursesId !== -1">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.sunday.coursesName }}
            </el-tag>
            <div style="text-align: center; color: #b598a1;">
              {{ scope.row.sunday.startTime }} - {{ scope.row.sunday.endTime }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 学生课程成绩评估 -->
    <div class="dashboard-text">课程成绩</div>
    <el-table v-loading="loading.coursesLoading" :data="coursesList.data" border style="width: 100%" max-height="275">
      <el-table-column prop="coursesName" label="课程名称" width="180" />
      <el-table-column prop="coursesType" label="课程性质" />
      <el-table-column prop="coursesDesc" label="课程介绍" />
      <el-table-column label="课程成绩">
        <template slot-scope="scope">
          <div v-if="scope.row.grades">
            <el-tag type="primary" disable-transitions>
              {{ scope.row.grades }}
            </el-tag>
          </div>
          <div v-else>
            <el-tag type="danger" disable-transitions>
              负责老师还没有进行评分
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px; text-align: right;"
      background
      layout="prev, pager, next"
      :current-page="pagination.page"
      :page-size.sync="pagination.limit"
      :page-count="coursesList.totalPage"
      :hide-on-single-page="coursesList.total <= coursesList.limit"
      @current-change="pageHandler"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { classlist, courseslist } from '@/api/common'
const DAY_MAP = {
  '0': 'monday',
  '1': 'tuesday',
  '2': 'wednesday',
  '3': 'thursday',
  '4': 'friday',
  '5': 'saturday',
  '6': 'sunday'
}
export default {
  name: 'Dashboard',
  data() {
    return {
      // 班级信息
      classInfo: {},
      // 加载
      loading: {
        timetableLoading: true,
        coursesLoading: true
      },
      // 课程表
      timetable: {},
      timetableArr: [],
      // 课程成绩分页列表
      coursesList: [],
      pagination: {
        page: 0,
        limit: 10
      }
    }
  },
  computed: {
    ...mapGetters([
      'name', 'lastTime', 'classname', 'userId'
    ])
  },
  mounted() {
    this.getClassInfo()
    this.getCoursesList()
  },
  methods: {
    /**
     * 获取班级信息
     */
    getClassInfo() {
      classlist().then(res => {
        this.classInfo = res.data[0]
        this.timetable = this.classInfo.timetable
        if (this.timetable) {
          // 存在课表
          this.timetable = JSON.parse(this.timetable)
          // 根据数组长度，进行排序
          const monthTimetable = []
          for (const key in this.timetable) {
            const list = this.timetable[key]
            if (monthTimetable.length === 0) {
              monthTimetable.push(list)
            } else {
              for (let i = monthTimetable.length - 1; i >= 0; i--) {
                const temp = monthTimetable[i]
                if (list.length > temp.length) {
                  monthTimetable[i] = list
                  monthTimetable[i + 1] = temp
                } else {
                  monthTimetable.push(list)
                }
              }
            }
          }
          // 将横型数组改成竖形数组
          const latArr = []
          const maxLenArr = monthTimetable[0]
          for (let i = 0; i < maxLenArr.length; i++) {
            const tempObj = {}
            let j = 0
            for (const key in this.timetable) {
              const list = this.timetable[key]
              let tempVal = list[i]
              if (!tempVal) {
                // 值不存在
                tempVal = {
                  coursesId: -1,
                  endTime: '',
                  startTime: '',
                  coursesName: ''
                }
              }
              tempObj[DAY_MAP[j + '']] = tempVal
              j++
            }
            latArr.push(tempObj)
          }
          this.timetableArr = latArr
          console.log(this.timetableArr)
        } else {
          this.timetableArr = []
        }
        this.loading.timetableLoading = false
      })
    },
    getCoursesList() {
      this.loading.coursesLoading = true
      courseslist(this.pagination).then(res => {
        this.coursesList = res.data
      }).finally(() => {
        this.loading.coursesLoading = false
      })
    },
    /**
     * 页面改变操作
     * @param {当前页} val
     */
    pageHandler(val) {
      if (val > 0) {
        this.pagination.page = val
      }
      this.getCoursesList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    color: #b598a1;
    font-size: 24px;
    line-height: 46px;
    margin: 10px 0 10px 0;
  }
}
</style>
